<!-- 实时监控查看曲线 -->
<template>
  <div>
    <el-dialog :title="lineTitle" :visible.sync="showModal" width="650px" :close-on-click-modal="false" @close="$emit('update:open',false)" top="5vh">
      <div class="tabList">
        <el-radio-group v-model="timeType" @change="tabClick">
          <el-radio-button label="DAY">今日</el-radio-button>
          <el-radio-button label="WEEK">本周</el-radio-button>
          <el-radio-button label="MONTH">本月</el-radio-button>
        </el-radio-group>
      </div>
      <div id="main" style="height:400px;padding:20px;clear: both;"></div>
      <!-- 底部按钮开始 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="$emit('update:open',false)">关闭</el-button>
      </span>
      <!-- 底部按钮结束 -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['meterType', 'mNo', 'open'],
  data () {
    return {
      lineTitle: '',
      showModal: true,
      myChart: '',
      timeType: 'DAY',
      getTime: {},
      xList: [],
      yList: [],
    }
  },
  methods: {
    fetchLine () {
      this.myChart = this.echarts.init(document.getElementById('main'), 'light');
      let option = {
        // title: {
        //   text:this.title,
        //   textStyle: {
        //     fontWeight: 'normal',
        //     fontSize: 16,
        //     color: '#000'
        //   },
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#000'
            }
          }
        },
        legend: {
          icon: "circle",
          data: [this.lineTitle],
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            color: '#000'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.xList,
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: this.lineTitle,
            type: 'line',
            stack: '总量',
            color: '#409eff', //改变折线点的颜色
            areaStyle: {              normal: {
                color: '#1989fa', //改变区域颜色
                opacity: .2,
              }            },
            lineStyle: {
              normal: {
                width: 4,
              }
            },
            data: this.yList
          }
        ]
      };
      this.myChart.setOption(option);
      window.onresize = this.myChart.resize
    },
    //根据类型获取标题
    getTitle () {
      switch (this.meterType) {
        case 'ELE': this.lineTitle = '电用量（kW·h）'; break;
        case 'WAT': this.lineTitle = '水用量（m³）'; break;
        case 'GAS': this.lineTitle = '气用量（m³）'; break;
      }
    },
    //点击tab触发
    tabClick (row) {
      this.timeType = row
      this.getLineList()
    },
    //实时监控曲线图
    async getLineList () {
      let url = `/report/queryReport/${this.mNo}/${this.meterType}/${this.timeType}`
      let result = await this.request.httpRequest('GET', url)
      if (result.code == 200) {
        this.xList = result.data.xdata
        this.yList = result.data.ydata
      } else {
        this.$message({ message: result.msg, type: 'error' })
      }
      this.fetchLine();
    }
  },
  mounted () {
    this.showModal = this.open
    Promise.all([this.getTitle(), this.getLineList()].map(a => a.catch(e => e)))
  }
}
</script>
<style scoped>
.tabList {
  overflow: auto;
  float: right;
  margin-right: 40px;
  margin-top: 10px;
}
</style>